<template>
  <view class="container">
    <view class="statistics-wrap">
      <view class="statistics-item">
        <view>反写总车型数</view>
        <view class="num">{{ record.total }}</view>
      </view>
      <view class="statistics-item">
        <view>成功数</view>
        <view class="num">{{ record.successCount }}</view>
      </view>
      <view class="statistics-item">
        <view>失败数</view>
        <view class="num">{{ record.failCount }}</view>
      </view>
    </view>
    <!-- list -->
    <ve-card :title="'记录' + (index + 1) + '：' + item.statusName" type="none" v-for="(item, index) in errList" :key="index">
      <ve-cell-val label="企橙门店名称" :value="item.siteName" />
      <ve-cell-val label="渠道门店名称" :value="item.channelSiteName" />
      <ve-cell-val label="企橙车型" :value="record.modelName" />
      <ve-cell-val label="渠道车型" :value="item.channelSiteName" />
      <ve-cell-val label="原因" :value="item.errorMsg" />
    </ve-card>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getChannelSyncPriceDetail } from '@/api/business/channelSyncPrice'

  onLoad((data) => {
    getDetail(data)
  })

  const record = ref({})
  const errList = ref({})
  const getDetail = async (data) => {
    const res = await getChannelSyncPriceDetail({ id: data.id })
    if (res.code === 200) {
      const data = res.result
      record.value = {
        total: data.itemList.length,
        successCount: data.successCount,
        failCount: data.failCount,
        modelName: data.modelName,
      }
      // 排序失败在前
      errList.value = data.itemList.sort((a, b) => a.status - b.status) || []
    }
  }
</script>

<style lang="less" scoped>
  .container {
    width: 100vw;
    height: auto;
    background: #f7f8fa;
    padding: 24rpx;
  }

  .statistics-wrap {
    background: #ffffff;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    padding: 24rpx;

    display: flex;
    .statistics-item {
      width: 33.3%;
      border-right: 1px solid #f4f4f4;
      font-size: 28rpx;
      color: #4e5969;
      line-height: 44rpx;
      padding-left: 60rpx;
      .num {
        font-size: 28rpx;
        color: #1890ff;
      }
      &:last-child {
        border-right: none;
      }
      &:first-child {
        padding-left: 0;
      }
    }
  }
</style>
